Thank you kindly for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me via my ThemeForest profile.
To edit the 'Welcome Message', simply find the appropriate label <!-- intro wrapper start --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- fade in 1 start --> <div class="fade-in-1"> <h3>An Ex Nihilo Template</h3> </div> <!-- fade in 1 end --> <!-- fade in 2 start --> <div class="fade-in-2"> <h1>The Horizon</h1> </div> <!-- fade in 2 end --> <!-- fade in 3 start --> <div class="fade-in-3"> <!-- slider start --> <div id="slider"> <div class="slide"> <h2>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>.</h2> </div> <div class="slide"> <h2> Donec placerat congue leo, nec vehicula elit <a href="#">vehicula vel</a>.</h2> </div> <div class="slide"> <h2>Duis odio nibh, malesuada sed luctus ut, consectetur <a href="#">vel dui</a>.</h2> </div> </div> <!-- slider end --> </div> <!-- fade in 3 end -->
To edit the 'About' page, simply find the appropriate label <!-- about start --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- about intro start --> <div class="about-intro"> <h4>About</h4> </div> <!-- about intro end -->
[...]
<!-- about full start --> <!-- sixteen columns start --> <div class="sixteen columns"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. [...]</p> </div> <!-- sixteen columns end --> <!-- about full end -->
[...]
<!-- about column 1 start --> <!-- one third column start --> <div class="one-third column"> <h5>Process Evaluation</h5> <!-- box effect start --> <section class="demo-3"> <!-- box start --> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <line class="top" x1="0" y1="0" x2="900" y2="0"/> <line class="left" x1="0" y1="360" x2="0" y2="-920"/> <line class="bottom" x1="300" y1="360" x2="-600" y2="360"/> <line class="right" x1="300" y1="0" x2="300" y2="1380"/> </svg> <!-- effect 8 start --> <section class="set-8"> <div class="hi-icon-wrap hi-icon-effect-8"> <a href="#" class="hi-icon hi-icon-pencil">Process Evaluation</a></div> </section> <!-- effect 8 end --> <span class="box-desc">Lorem ipsum dolor sit amet.</span></div> <!-- box end --> </section> <!-- box effect end --> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. [...]</p> </div> <!-- one third column end --> <!-- about column 1 end -->
[...]
To edit the 'Services' page, simply find the appropriate label <!-- services start --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- services intro start --> <div class="services-intro"> <h4>Services</h4> </div> <!-- services intro end -->
[...]
<!-- services full start --> <!-- sixteen columns start --> <div class="sixteen columns"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. [...]</p> </div> <!-- sixteen columns end --> <!-- services full end -->
[...]
<!-- services column 1 start --> <!-- one third column start --> <div class="one-third column"> <h5>Mobile Friendly</h5> <!-- box effect start --> <section class="demo-3"> <!-- box start --> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <line class="top" x1="0" y1="0" x2="900" y2="0"/> <line class="left" x1="0" y1="360" x2="0" y2="-920"/> <line class="bottom" x1="300" y1="360" x2="-600" y2="360"/> <line class="right" x1="300" y1="0" x2="300" y2="1380"/> </svg> <!-- effect 8 start --> <section class="set-8"> <div class="hi-icon-wrap hi-icon-effect-8"> <a href="#" class="hi-icon hi-icon-mobile">Mobile Friendly</a></div> </section> <!-- effect 8 end --> <span class="box-desc">Lorem ipsum dolor sit amet.</span></div> <!-- box end --> </section> <!-- box effect end --> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. [...]</p> </div> <!-- one third column end --> <!-- services column 1 end -->
[...]
To edit the 'Contact' page, simply find the appropriate label <!-- contact start --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- contact intro start --> <div class="contact-intro"> <h4>Contact</h4> </div> <!-- contact intro end -->
[...]
<!-- contact column 1 start --> <!-- one third column start --> <div class="one-third column"> <div class="info-address"> <p><strong>Address</strong></p> <p>ex nihilo, Inc.<br> Touchdown Dr<br> 1176</p> </div> </div> <!-- one third column end --> <!-- contact column 1 end -->
[...]
To send the contents of your 'Subscription Form' to your email, simply open the file named 'subscribe.php'.
Your email address goes here:
$myemail = 'you@yoursite.com';
To send the contents of your 'Contact Form' to your email, simply open the file named 'send.php'.
Your email address goes here:
$myemail = 'you@yoursite.com';
To set the 'Countdown Target Date', simply find the appropriate label <!-- countdown setup start --> at the very bottom of the HTML file named 'index.html'.
Edit this section:
date: "03 May 2015 12:00:00", // countdown target date settings
To add images in the background of the template, simply find the files named 'supersized.3.2.7.bg.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// supersized'.
Replace:
{image : 'images/background/1.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/2.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/3.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/4.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/5.jpg', title : '', thumb : '', url : ''}
With:
{image : 'images/background/your-image-name-1.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-2.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-3.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-4.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-5.jpg', title : '', thumb : '', url : ''}
You can use any size for a background image.
Please note;
Demo images are not included. Image placeholders are provided instead.
To add 'YouTube Videos' in the background of the template, simply find the appropriate label <!-- YTPlayer start --> in the body of the HTML file named 'index.html'.
Replace:
<!-- YTPlayer start -->
<a href="http://www.youtube.com/watch?v=m8GZb9ueKms" id="bgndVideo" class="player {containment:'body', autoPlay:true, mute:true, startAt:0, opacity:1, loop:true, showControls:false, ratio:'16/9'}"></a>
<!-- YTPlayer end -->
With:
<!-- YTPlayer start -->
<a href="http://www.youtube.com/watch?v=youryoutubevideouniqueID" id="bgndVideo" class="player {containment:'body', autoPlay:true, mute:true, startAt:0, opacity:1, loop:true, showControls:false, ratio:'16/9'}"></a>
<!-- YTPlayer end -->
Please note;
This template is designed to use YouTube videos as a background; however, 'YouTube Video Background' plugin is not supported by mobile devices and it doesn't work on mobile devices, so the background image is added to compensate for it. This background image can be found by following its URL path: 'images/background/1.jpg'.
By default the sound of the video is set mute. To unmute the sound, change 'mute:true' into 'mute:false'.
To edit the real time live 'Twitter Feed', simply find the file named 'the-horizon.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// twitter ticker'.
Replace:
username: "enihilo",
With:
username: "yourtwitterusername",
To link the 'Twitter Logo' to your account, simply find the appropriate label <!-- twitter ticker start --> in the body of the HTML file named 'index.html'.
Replace:
<a class="logo" href="https://twitter.com/enihilo" target="_blank">Twitter</a>
With:
<a class="logo" href="https://twitter.com/yourtwitterusername" target="_blank">Twitter</a>
Twitter API 1.1 OAuth authentication process
[Step 1] Setup a Twitter Application
1. Visit https://dev.twitter.com/apps and sign in with your Twitter account username and password
2. Select 'Create a new application' and fill in the application form with the following application details:
- Name: e.g. 'yoursite.com'
- Description: e.g. 'tweet.js-mod'
- Website: e.g. http://www.yoursite.com/
- Callback URL: This field can be left blank
3. Enter the CAPTCHA and click 'Create your Twitter application'
4. Create your access token
5. Make a note of the 'Consumer key', 'Consumer secret', 'Access token' and 'Access token secret'
[Step 2] Authenticate the Twitter Feed
After creating your application, open the file named 'index.php' placed in the folder named 'twitter'.
Open the 'index.php' file and configure it with your OAuth credentials in the assigned slots below:
// Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';
// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';
// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';
// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';
Save the edited 'index.php' file. Upload the entire 'twitter' folder on your web server.
Please note;
The 'twitter' folder [containing: index.php, ticker.js, jquery.tweet.js, jquery.tweet.css, twitter-logo.png and the lib files) is designed to be placed in the document root of your website as a whole (e.g. yourdomain.com/twitter), otherwise it will not work.
I will respond to buyers' questions via the contact form on my profile.
Support for my items includes:
Responding to questions or problems regarding the item and its features
Fixing bugs and reported issues
Providing updates to ensure compatibility with new software versions
Item support does not include:
Customization and installation services
Support for third party software and plug-ins
Social Icons
To edit the 'Social Icons' links, simply find the appropriate label <!-- social icons start --> in the body of the HTML file named 'index.html'.
Part to edit: